<template>
  <view class="teacher">
    <!-- #ifndef MP-WEIXIN -->
    <u-row class="page-title" justify="between">
      <view class="text-left">优秀讲师</view>
      <view class="icon-right" @click="toLecturerList">查看全部</view>
    </u-row>
    <!-- #endif -->

    <!-- #ifdef MP-WEIXIN -->
    <view class="page-title">
      <view class="text-left">优秀讲师</view>
      <view class="icon-right" @click="toLecturerList">查看全部</view>
    </view>
    <!-- #endif -->
    <swiper class="teacher-swiper" display-multiple-items="2" next-margin="96rpx">
      <swiper-item v-for="(item, index) in data" :key="index" @click="toLecturer(item.user_id)">
        <view class="teacher-wrap">
          <view class="teacher-item">
            <u-avatar :src="item.avatar_url" size="120"></u-avatar>
            <view class="name u-line-1">{{ item.title }}</view>
            <view class="tip">{{ item.level_text }}</view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <edu-empty v-if="isNull"></edu-empty>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default() {
        return []
      },
    },
    organId: {
      type: String,
    },
    isNull: {
      type: Boolean,
      default() {
        return false
      },
    },
  },
  methods: {
    toLecturer(id) {
      this.$edu.route('pageFound/user/index', {
        id: id,
      })
    },
    toLecturerList() {
      this.$u.route('pageFound/teacher/list', {
        id: this.organId,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.teacher {
  padding: 60rpx 30rpx;
  background-color: white;
  margin-top: 16rpx;
  .page-title {
    /* #ifdef MP-WEIXIN */
    display: flex;
    justify-content: space-between;
    /* #endif */
    .text-left {
      font-size: 40rpx;
      font-weight: bold;
      color: $edu-main-color;
      letter-spacing: 1rpx;
    }
    .text-right {
      font-size: 28rpx;
      font-weight: 400;
      color: $edu-tips-color;
    }
  }

  .teach_item {
  }

  .teacher-swiper {
    margin: 70rpx -16rpx 0;
    height: 320rpx;
    .teacher-wrap {
      padding: 0 16rpx;
      .teacher-item {
        height: 320rpx;
        background: $edu-bg-color;
        border-radius: 10rpx;
        padding: 40rpx 30rpx 0;
        text-align: center;
        .name {
          font-size: 26rpx;
          font-weight: 500;
          color: $edu-main-color;
          margin-top: 24rpx;
        }
        .tip {
          font-size: 24rpx;
          font-weight: 400;
          color: $edu-tips-color;
          margin-top: 8rpx;
        }
      }
    }
  }
}
</style>
